<template>
    <div>
        <div class="container">
            <div class="searchGroup">
                <span class="inputName">名称：</span>
                <el-input
                    placeholder="请输入名称"
                    v-model="query.keyword"
                    class="inputbox"
                    style="width:auto;margin-right:10px;"
                ></el-input>
                <span class="inputName"></span>
                <el-button
                    type="success"
                    icon="el-icon-search"
                    size="medium"
                    @click="searchTemplate"
                >搜索</el-button>
                <el-button type="warning" icon="el-icon-refresh" size="medium" @click="reset">重置</el-button>
            </div>
            <div style="padding:10px;">
                <el-button
                    type="primary"
                    icon="el-icon-document-add"
                    size="medium"
                    @click="createBus"
                >新建</el-button>
                <span style="padding:8px;"></span>
                <el-button
                    type="danger"
                    icon="el-icon-delete"
                    size="medium"
                    @click="delAllSelection()"
                >批量删除</el-button>
            </div>
            <div>
                <el-table
                    :data="tableData"
                    style="width: 100%;"
                    border
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column label="序号" align="center">
                        <template scope="scope">
                            <span>{{scope.$index+(query.pageIndex - 1) * pagesize + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="名称" align="center"></el-table-column>
                     <el-table-column label="类型" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.type==1">评分</span>
                            <span v-if="scope.row.type==2">评价</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status==0">启用</span>
                            <span v-if="scope.row.status==1">禁用</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" align="center">
                        <template slot-scope="scope">{{scope.row.create_time | formDate}}</template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template
                            slot-scope="scope"
                            style="flex-direction: row;align-items: center;justify-content: center;"
                        >
                            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click="handleDelete(scope.row.id)" type="text" size="small">
                                <span style="color:red;">删除</span>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination
                    layout="sizes,total, prev, pager, next, jumper"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :page-sizes="[10, 50, 100, 150,200]"
                    @size-change="handleSizeChange"
                    :total="total"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialog" width="70%">
            <div class="list-group">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="list-title"><span class="mast-icon" v-if="modelList.title.request">*</span>名称:</div>
                    </el-col>
                    <el-col :span="21">
                        <el-input
                            v-model="modelList.title.value"
                            :placeholder="modelList.title.placeholder"
                        ></el-input>
                    </el-col>
                </el-row>
            </div>
             <div class="list-group">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="list-title"><span class="mast-icon" v-if="modelList.type.request">*</span>类型:</div>
                    </el-col>
                    <el-col :span="21">
                        <el-radio-group v-model="modelList.type.value">
                            <el-radio :label="1">评分</el-radio>
                            <el-radio :label="2">评价</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
            </div>
            <div class="list-group">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="list-title"><span class="mast-icon" v-if="modelList.sort.request">*</span>排序:</div>
                    </el-col>
                    <el-col :span="21">
                        <el-input
                            v-model="modelList.sort.value"
                            :placeholder="modelList.sort.placeholder"
                            type="number"
                        ></el-input>
                        <p style="color:red">输入整数,数字越大排名越靠前</p>
                    </el-col>
                </el-row>
            </div>
            <div class="list-group">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="list-title"><span class="mast-icon" v-if="modelList.status.request">*</span>禁用/启用:</div>
                    </el-col>
                    <el-col :span="21">
                        <el-switch
                            v-model="modelList.status.value"
                            active-text="禁用"
                            inactive-text="启用">
                        </el-switch>
                    </el-col>
                </el-row>
            </div>
            
            <span slot="footer" class="dialog-footer">
                <el-button size="medium" @click="dialog = false">取 消</el-button>
                <el-button size="medium" type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import api from '@/api/index';
import { getdate } from '@/utils/utils';
export default {
    name: 'contract',
    data() {
        return {
            projectArr: [],
            dialog: false, //新增模板合同弹窗
            dialog1: false, //查看模板合同弹窗
            title: '', //查看模板合同弹框标题
            tmplateName: '', //合同模板名称输入框
            // contractName: '',
            tableData: [], //数据列表
            currentPage: 1, //初始页
            pagesize: 10, //    每页的数据
            total: null,
            docLoadPath: api.API_PATH + api.LOGIN_WORD,
            uploadDocUrl: '',
            DOC_PATH: api.DOC_PATH,
            query: {
                pageIndex: 1,
                keyword: '',
                pageSize:10
            },
            modelList: {
                title: { value: '', request: true, name: '名称', placeholder: '请填写名称', type: 'input' },
                sort: { value: '', request: false, name: '排序', placeholder: '请填写排序', type: 'input' },
                type: { value: 1, request: true, name: '类型', placeholder: '请选择类型', type: 'input' },
                status: { value: false, request: false, name: '禁用/启用', placeholder: '请选择禁用/启用', type: 'input' },
            },
            dialogTitle: '城市新增',
            modelType: 1,
            itemId: '',
            questionList: [],
            multipleSelection: []
        };
    },
    filters: {
        formDate: (val) => {
            if (!val) return '';
            return getdate(val);
        }
    },
    mounted() {
        this.initAjaxMethod();
    },
    methods: {
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //增加题目
        addQuestion(flag) {
            console.log(flag);
            let json = { value: '', questionChild: [] };
            if (flag === -1) {
                this.questionList.push(json);
            } else {
                this.questionList[flag].questionChild.push(json);
            }
        },
        delQuestion(pareIndex, index = -1) {
            if (index == -1) {
                this.questionList.splice(pareIndex, 1);
            } else {
                this.questionList[pareIndex].questionChild.splice(index, 1);
            }
        },
        //新建
        createBus() {
            this.questionList = [];
            this.modelType = 1;
            this.dialog = true;
            this.dialogTitle = '城市新增';
            for (let i in this.modelList) {
                this.modelList[i].value = '';
            }
            this.modelList.status.value =false;
            this.modelList.type.value =1;
        },
        //查看模板合同
        handleClick(data) {
            console.log(data);
            this.modelType = 2;
            this.dialog = true;
            this.dialogTitle = '城市编辑';
            this.itemId = data.id;
            this.modelList.title.value = data.title;
            this.modelList.sort.value = data.sort;
            this.modelList.type.value = data.type;
            this.modelList.status.value = data.status==0?false:true;
        },
        //确定按钮
        saveEdit() {
            if (this.modelType === 1) {
                this.addTepmlateAjax();
            } else {
                this.editTepmlateAjax();
            }
        },
        addTepmlateAjax() {
            //验证
            let test = this.testMethod();
            if (!test.flag) {
                this.$message.error(test.msg);
                return false;
            }
            console.log(test);
            const loading = this.$loading({ text: '加载中...' });
            this.$http
                .post(api.EVALUATE_ADD, test.data) 
                .then(res => {
                    loading.close(); 
                    console.log('管理员列表', res);
                    if (res.code == 1) {
                        this.$message.success('保存成功');
                        this.dialog = false;
                        this.query.pageIndex = 1;
                        this.initAjaxMethod();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch(err => {
                    this.$message.error(err.msg);
                });
        },
        editTepmlateAjax() {
            //验证
            let test = this.testMethod();
            if (!test.flag) {
                this.$message.error(test.msg);
                return false;
            }
            const loading = this.$loading({ text: '加载中...' });
            this.$http
                .post(api.EVALUATE_EDIT, test.data)
                .then(res => {
                    loading.close();
                    console.log('管理员列表', res);
                    if (res.code == 1) {
                        this.$message.success('编辑成功');
                        this.dialog = false;
                        this.initAjaxMethod();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch(err => {
                    this.$message.error(err.msg);
                });
        },
        handleAvatarSuccess(res, file) {
            console.log(res);
            this.modelList.value.value = res.data;
        },
        beforeAvatarUpload(file) {},
        //搜索合同模板
        searchTemplate() {
            this.query.pageIndex = 1;
            this.initAjaxMethod();
        },
        //企业列表接口
        initAjaxMethod() {
            const loading = this.$loading({ text: '加载中...' });
            this.$http.post(api.EVALUATE_INDEX, {
                pageIndex:this.query.pageIndex,
                pagesize:this.query.pageSize,
                keyword:this.query.keyword
            }).then(res => {
                console.log('**************', res);
                loading.close();
                this.tableData = Array.isArray(res.data.list)?res.data.list:[];
                this.total = res.data.total;
            });
        },
        //重置
        reset() {
            this.query = {
                pageIndex: 1,
                keyword: ''
            };
            this.initAjaxMethod(this.query);
        },
        delAllSelection() {
            let arr = [];
            if (this.multipleSelection.length <= 0) {
                this.$message({
                    type: 'error',
                    message: '请选择一个'
                });
                return false;
            } else {
                this.multipleSelection.forEach(item => {
                    arr.push(item.id);
                });
                this.handleDelete(arr.join(','));
            }
        },
        //删除合同模板信息
        handleDelete(id) {
            console.log(id);
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.post(api.EVALUATE_DEL, { ids: id }).then(res => {
                    if (res.code == 1) {
                        this.query.pageIndex = 1;
                        this.initAjaxMethod(this.query);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.msg
                        });
                    }
                });
            });
        },
        //点击第几页
        handleSizeChange(currentPage) {
            // console.log(currentPage)

            this.query.pageSize = currentPage;
            this.initAjaxMethod(this.query);
            // console.log(this.query);
        },
        handlePageChange(e){
            this.query.pageIndex = e;
            this.initAjaxMethod(this.query);
        },
        //验证方法
        testMethod() {
            console.log('1');
            let flag = true,
                msg = '',
                data = {};
            for (let i in this.modelList) {
                if (this.modelList[i].request) {
                    if (!this.modelList[i].value || this.modelList[i].value == '') {
                        flag = false;
                        msg = this.modelList[i].placeholder;
                        break;
                    }
                }
            }
            if (flag) {
                data = {
                    title: this.modelList.title.value,
                    sort: this.modelList.sort.value,
                    type: this.modelList.type.value,
                    status: this.modelList.status.value?1:0
                };
                if (this.modelType == 2) {
                    data.id = this.itemId;
                }
            }
            return {flag:flag,data:data,msg:msg}
        }
    }
};
</script>

<style scoped>
/* .inputName {
      font-size: 14px;
      color: #606266;
      margin-right: 10px;
  } */
.inputName {
    font-size: 15px;
    padding: 0 10px;
}
.inputbox {
    width: 200px;
    margin-right: 20px;
}
.searchGroup {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}
.list {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin: 20px;
}
.list-group {
    padding: 10px;
}
</style>

